<template>
    <h1>个人信息</h1>
    <h2>姓名：{{ person.name }}</h2>
    <h2>年龄：{{ person.age }}</h2>
    <h2>职业：{{ person.job.type }}</h2>
    <h2>薪水：{{ person.job.salary }}</h2>
    <h2>爱好：{{ person.hobby }}</h2>
    <button @click="changeInfo">修改</button>
    <p style="text-align: left;border-top: 1px solid #000;">
        注意：reactive 函数不能处理基本类型数据
        <br>
        可以借助代理对象来提高代码的可读性
    </p>
</template>

<script lang="ts">
import { reactive } from 'vue'

export default {
    name: 'ref',
    setup() {
        // 数据（响应式）
        let person = reactive({
            name: '张三',
            age: 18,
            job: {
                type: '前端',
                salary: '30k'

            },
            hobby:['打游戏','打游戏','打游戏']

        })

        // 方法
        function changeInfo() {
            person.name = '李四'
            person.age = 90
            person.job.type = 'UI设计'
            person.job.salary = '20k'
            person.hobby[0] = '学习'
        }

        return {
            person,
            changeInfo
        }
    }
} 
</script>
<style></style>